<template>
	<el-row
			style="width: 100%; height: 100%;position: fixed;z-index:2;"
			ref="viewerContainer"
			class="demo-viewer"
	>
			<vc-viewer :logo="false" @ready="ready">
				<vc-overlay-html :position="{ lng: item.x, lat: item.y }" v-for="(item,index) in thermodynamicData.resultList" v-if="nearbyData"  >
      <div class="label-containers label-container-var">
								<div class="thermalCircle" style="position: relative;" :style="{bottom: item.radiusWidth/2 + 'px',right: item.radiusWidth/2 + 'px', width: item.radiusWidth + 'px',height:item.radiusWidth + 'px'}" ></div>
      </div>
    </vc-overlay-html>
					<vc-overlay-html :position="{ lng: item.x, lat: item.y }" v-for="(item,index) in thermodynamicData.resultList" v-if="nearbyData"  >
      <div class="label-container label-container-var">
        <div class="label-animate-marker_border" @click="goPropertyLifeDetail(item.xmmc)" >
									 <div class="label-animate-marker_value">{{	item.num }}</div>
          <div class="label-animate-marker_value">{{	item.xmmc }}</div>
        </div>
      </div>
    </vc-overlay-html>
			</vc-viewer>
	</el-row>
</template>

<script setup>
import { ref, reactive,watchEffect,onMounted } from "vue";
import { useRouter } from "vue-router";
const thermodynamicData = ref(null)
const point1 = ref(null)
const router = useRouter();
//四至参数
const rectangle = reactive({
				west: '',
    south: '',
    east: '',
    north: '',
}) 
// 最大最新值
const minValue = ref(null)
const maxValue = ref(null)
// 热力图参数
const options =reactive({
	backgroundColor: 'rgba(0,0,0,0)',
	radius:3,
}) 
const radiuss = reactive([3,5,10,6])

// data
const segments = ref([
	[],
	[],
])
const nearbyData = ref([]);
const baseLng = 123.4; // 基准经度
const baseLat = 41.8; // 基准纬度
const radius = 0.1; // 经纬度范围半径，假设为0.01
const heatmap = ref(null);
const show = true
//中心点
const centerData = ref([
	{
			name: "中心点-标识",
			lng: 123.440092, //标签经度
			lat: 41.813635, //标签纬度
			value: 100,
	},
]);

//接收参数
const props = defineProps({
	thermodynamicData: {
			type: Object,
			default: () => {},
	},
});
watchEffect(() => {
	nearbyData.value = []
	thermodynamicData.value = props.thermodynamicData
	for(let i = 0;i<thermodynamicData.value.resultList.length;i++) {
		 const data = thermodynamicData.value.resultList[i];
		nearbyData.value.push({value:data.num,x:data.x,y:data.y})
	}
	thermodynamicData.value.resultList.forEach(i => {
					if(i.num < 100){
						i.radiusWidth = 150
					}else if(i.num < 200){
						i.radiusWidth = 160
					}else if(i.num < 300){
						i.radiusWidth = 170
					}else if(i.num < 400){
						i.radiusWidth = 180
					}else if(i.num < 700){
						i.radiusWidth = 190
					}else if(i.num < 1000){
						i.radiusWidth = 200
					}else if(i.num < 5000){
						i.radiusWidth = 210
					}else if(i.num < 8000){
						i.radiusWidth = 220
					}else if(i.num < 10000){
						i.radiusWidth = 230
					}else if(i.num < 13000){
						i.radiusWidth = 240
					}else if(i.num < 15000){
						i.radiusWidth = 250
					}else if(i.num < 20000){
						i.radiusWidth = 260
					}else if(i.num < 25000){
						i.radiusWidth = 270
					}else if(i.num < 30000){
						i.radiusWidth = 280
					}else if(i.num < 35000){
						i.radiusWidth = 290
					}else if(i.num < 40000){
						i.radiusWidth = 300
					}  
	});
		
	console.log(thermodynamicData.value)
});

const ready = ({ Cesium, viewer }) => {
	// 去除水印
	viewer._cesiumWidget._creditContainer.style.display = "none";
	viewer.camera.setView({
		// 初始位置
			destination: Cesium.Cartesian3.fromDegrees(123.440092, 41.813635, 30000),
			orientation: {
				//相机角度
					heading: Cesium.Math.toRadians(0),
					pitch: Cesium.Math.toRadians(-90),
					roll: 0.0,
			},
	});
	//缩放大小限制
	viewer.scene.screenSpaceCameraController.maximumZoomDistance = 100000;
	viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10;
	viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
    Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
  );

	//加载离线地图
	viewer.imageryLayers.addImageryProvider(
			new Cesium.UrlTemplateImageryProvider({
					url: "http://192.168.30.225:8088/mapsatellite/{z}/{x}/{y}.jpg",
					fileExtension: "jpg",
			})
	);
	// addPoints(Cesium, viewer)
	//三、屏幕坐标和世界坐标相互转换
var pickl= new Cesium.Cartesian2(123.440092, 41.813635);
var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pickl),viewer.scene);
};

// 热力图
const onHeatmapReady = () => {
	heatmap.value.childRef.value.creatingPromise.then(
			({ Cesium, viewer, cesiumObject }) => {
					if (cesiumObject instanceof Cesium.GroundPrimitive) {
					  // const geometry =
					  //   cesiumObject.geometryInstances.geometry.constructor.createGeometry(
					  //     cesiumObject.geometryInstances.geometry
					  //   );
					  // viewer.scene.camera.flyToBoundingSphere(geometry.boundingSphere);
					} else if (cesiumObject instanceof Cesium.Entity) {
					  // viewer.flyTo(cesiumObject);
					} else {
					  // viewer.camera.flyTo({
					  //   destination: cesiumObject.imageryProvider.rectangle,
					  // });
					}
			}
	);
};

//详情页
const goPropertyLifeDetail = (xmmc) => {
	router.push('propertyLifeDetail?xmmc='+ xmmc)
}

onMounted(() => {
});

</script>
<style lang="less">
		.label-container{
			position:relative;
			z-index:10;
			.label-animate-marker_border{
					color: #fff;
					font-size: 20px;
					text-align: center;
					position: relative;
					bottom: 120px;
					right: 50px;
				
			}
			
		}
		.label-containers{
			position:relative;
			z-index:20;
			.thermalCircle{
				border-radius:50%;
				background: radial-gradient(circle,  rgba(255, 0, 0, 0.8) 0%, rgba(241, 190, 76, 0.9) 100%);
				filter: blur(23px);
			}
		}
	.label-animate-marker_border{
		width: 100px;
		height: 120px;
		background: url('../../assets/img/propertyLife/point.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	
	.label-animate-marker_value:first-child{
			font-size:30px;
			padding-top: 10px;
			width: 100%;
			white-space: nowrap; /* 确保文本不换行 */
			overflow: hidden; /* 隐藏超出容器的内容 */
			text-overflow: ellipsis; /* 使用省略号显示被截断的文本 */
		}
		.label-animate-marker_value:last-child{
			margin-top: 5px;
			width: 100%;
			white-space: nowrap; /* 确保文本不换行 */
			overflow: hidden; /* 隐藏超出容器的内容 */
			text-overflow: ellipsis; /* 使用省略号显示被截断的文本 */
		}
		.label-animate-marker_value:hover{
			cursor: pointer;
		}

</style>